<template>
  <div class="open-success-wrapper">
    <img
      class="open-success-img"
      src="../assets/card_apply_success.png"
    >
    <p class="fontsize34 baseColorNoAcitve">恭喜您成功开通{{cardName}}</p>
    <button
      class="fontsize30 baseBgColorWithActive recharge-btn"
      @click="goToRechargePage"
    >立即充值</button>
    <button
      class="fontsize30 baseBorder baseColorNoAcitve bind-btn"
      @click="goToBindCardPage"
    >添加银行卡</button>
  </div>
</template>

<script>
import { open } from '@/utils/JumpUtils.js'
export default {
  components: {
  },
  data() {
    return {
      cardName: window.buscardName
    }
  },
  beforeCreate() {
    this.$UI.then(UI => {
      UI.setTitle('开通成功', () => { }, () => { })
    })
  },
  mounted() {
  },
  methods: {
    goToRechargePage() {
      open('buscard-app/recharge.html')
    },
    goToBindCardPage() {
      open('bindcard.html?_tv=false&_knbw=true')
    }
  }
}
</script>

<style scoped>
#app {
  background-image: url('../assets/card_apply_bg.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}
.open-success-wrapper {
  text-align: center;
}
.open-success-img {
  width: 300px;
  height: 270px;
  padding-top: 100px;
}
.open-success-wrapper > p {
  padding: 44px 0 114px 0;
}
.open-success-wrapper > button {
  width: 690px;
  height: 80px;
  border-radius: 8px;
  margin-top: 30px;
}
.recharge-btn {
  border: none;
  color: #ffffff;
}
.bind-btn {
  background: none;
}
</style>
